<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="dropdown">
    <div class="input-group">
        <span class="glyphicon glyphicon-home input-group-addon addon"></span>
        <div class="dropdown-toggle" data-toggle="dropdown">
            <input class="form-control " type="text"
                   value="<%=contact.getTelephones() != null?contact.getTelephones()[0].getPhone_number():"Empty"%>"
                   readonly title="<%=contact.getTelephones() != null?contact.getTelephones()[0].getRemark():""%>">
        </div>
        <ul class="dropdown-menu" style="top: -7px; background-color:#eeeeee;" role="menu"
            aria-labelledby="dropMenu<%=contact.getContact_id()%>">
            <%
                if (null != contact.getTelephones()) {
                    for (int item = 0; item < contact.getTelephones().length; item++) {%>
            <li role="presentation">
                <div role="menuitem" tabindex="-1">
                    <div class="input-group">
                        <input type="hidden" name="contact_id" value="<%=contact.getContact_id()%>">
                        <input type="hidden" name="id" value="<%=contact.getTelephones()[item].getId()%>">
                        <input type="text" class="form-control" name="phone"
                               value="<%=contact.getTelephones()[item].getPhone_number()%>" title="手机号码">
                        <span class="glyphicon glyphicon-trash btn-danger input-group-addon phone_delete addon"></span>
                    </div>
                </div>
            </li>
            <%
                    }
                }
            %>
            <li class="divider"></li>
            <li role="presentation" style="margin: 10px;">
                <form action="./module/route.jsp" method="post">
                    <div class="input-group">
                        <input type="hidden" name="tag" value="<%=tag%>">
                        <input type="hidden" name="opt" value="insert">
                        <input type="hidden" name="key" value="phone">
                        <input type="hidden" name="id" value="<%=contact.getContact_id()%>">
                        <h4>新增号码</h4>
                        <input type="text" class="form-control" name="phone" placeholder="号码">
                        <select name="type" class="form-control" title="类型">
                            <option value="CELL">手机</option>
                            <option value="HOME">住宅</option>
                            <option value="WORK">公司</option>
                            <option value="VOICE">其他</option>
                            <option value="WORK;FAX">传真</option>
                            <option value="X-SELF">自定义</option>
                        </select>
                        <input type="text" class="form-control" name="remark" placeholder="备注">
                        <button class="glyphicon glyphicon-plus addon form-control"></button>
                    </div>
                </form>
            </li>
        </ul>
    </div>

</div>
<script>
    $(function () {
        $("span.phone_delete").click(function () {
            $.get("module/route.jsp?opt=delete&key=phone", {
                "id": $(this).siblings("input[name='contact_id']").val(),
                "pro": $(this).siblings("input[name='id']").val()
            });
            $(this).parentsUntil("li").detach();
        });
    });
</script>